<script setup lang="ts" name="showInfo">
import { ref, onMounted } from 'vue'
const mainColor = ref('#fff')
defineProps<{
  user: string
  mainImg: string
  gender: string | number | boolean
  followig: string | number
  followed: string | number
  link: string
  linkMsg: string
}>()
onMounted(() => {
  // 透明背景
  mainColor.value = `rgba(255, 255, 255, 0.8)`
})
// 0 女 1 男
const meal = ref(0)
</script>

<template>
  <div id="infoCard" :style="{ backgroundColor: mainColor }">
    <div class="top">
      <section>
        <span class="mainImg">
          <img ref="mainImg" :src="mainImg" alt="" />
        </span>
        <span class="userMsg">
          <p>
            <span class="name">{{ user }}</span>
          </p>
          <p>
            <span class="vip">
              <User class="svg" />
            </span>
            <span class="gender">
              <Male class="svg" v-if="meal" />
              <Female class="svg" v-else />
            </span>
          </p>
          <p>
            <span>
              <Bell class="svg" />
              <b>{{ followed }}</b>
            </span>
            <span>
              <Star class="svg" />
              <b>{{ followig }}</b>
            </span>
          </p>
          <p>
            <Link class="svg" />
            <a :href="link">{{ linkMsg }}</a>
          </p>
        </span>
      </section>
    </div>
    <div class="bottom">
      <span class="info default-button">
        <Star class="button" />
      </span>
      <span class="followig default-button">
        <House class="button" />
      </span>
      <span class="followed default-button">
        <ChatDotSquare class="button" />
      </span>
    </div>
  </div>
</template>

<style scoped lang="less">
.svg {
  width: 20px;
  height: 20px;
  margin: 8px 6px;
  display: inline-block;
  vertical-align: middle;
}
#infoCard {
  width: 280px;
  height: 340px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: var(--radius);
}
.top {
  height: 76%;
  section:nth-child(1) {
    margin-top: 20px;
    width: 100%;
    height: 100%;
    text-align: center;

    .mainImg {
      display: inline-block;
      border-radius: var(--radius);
      overflow: hidden;
      width: 76px;
      height: 76px;
      img {
        width: 76px;
        height: 76px;
        object-fit: cover;
      }
    }
    .userMsg {
      height: 76px;
      display: grid;
      grid-template-rows: repeat(2, 1fr);
      vertical-align: top;
      margin: 0 10px;
      justify-items: center;
      align-items: center;
      p {
        white-space: nowrap;

        span {
          display: inline-block;
          height: 36px;
          b {
            vertical-align: middle;
            font-weight: normal;
          }
        }
        .name {
          display: block;
          white-space: nowrap;
          width: 200px;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 20px;
          margin: 4px;
          line-height: 36px;
        }
      }
    }
  }
}
.button {
  width: 40px;
}
.bottom {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  span {
    padding: 4px;
  }
}
</style>
